/**
 * Created by Administrator on 2017/07/17 0017.
 */


import React from 'react'
import {View,FlatList, Text} from 'react-native';

export default class UseFlatList extends React.Component{

    constructor(props){
        super(props)
        this.state={
            extraData:'操你妈逼'
        }
    }
    render(){
        let listNullData = null
        let listData = [{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},
            {'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'}
            , {'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'}
            , {'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'}
            , {'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'},{'title':'牛逼'}];
        return(
            <View style={{flex:1}}>
                <FlatList
                    data={listData}
                    renderItem={({item,index}) =>this._renderItem(item,index)}
                    ListHeaderComponent={()=>this._renderHead()}
                    ListFooterComponent={()=>this._renderBottom()}
                    ListEmptyComponent={()=>this._renderNull()}
                    ItemSeparatorComponent={()=>this._renderItemDivider()}
                    numColumns={1}
                    onRefresh={this._onRefresh}
                    refreshing={false}
                    onEndReached={({info}) =>{alert(JSON.stringify(info))}}
                    onEndReachedThreshold={0.1}
                    extraData={this.state}/>

                {/*<FlatList*/}
                    {/*ref={(flatList) => this._flatList = flatList}*/}
                    {/*ListHeaderComponent={this._header}*/}
                    {/*ListFooterComponent={this._footer}*/}
                    {/*ItemSeparatorComponent={this._separator}*/}
                    {/*renderItem={this._renderItem}*/}
                    {/*numColumns ={2}*/}
                    {/*columnWrapperStyle={{ borderWidth: 2, borderColor: 'black' }}*/}
                    {/*refreshing={this.state.refreshing}*/}
                    {/*getItemLayout={(data, index) => (*/}
                        {/*{ length: ITEM_HEIGHT, offset: (ITEM_HEIGHT + 2) * index, index }*/}
                    {/*) }*/}
                    {/*onRefresh={this._onRefresh}*/}
                    {/*onEndReachedThreshold={0.1}*/}
                    {/*onEndReached={(info) => {*/}
                        {/*alert("滑动到底部了");*/}
                    {/*} }*/}
                    {/*data={data}>*/}
                {/*</FlatList>*/}
            </View>
        )
    }

    _onRefresh() {
        alert('正在刷新中.... ');
    }

    //FlatList分割线（不会出现在第一条数据的顶部和最后一条数据的底部）
    _renderItemDivider(){
        return(
            <View style={{width:'100%',height:2,backgroundColor:'#14ff1d'}}></View>
        )
    }

    //当数据为空渲染的界面
    _renderNull(){
        return(
            <Text style={{flex:1}}>数据为null</Text>
        )
    }

    //尾部
    _renderBottom(){
        return(
            <View style={{width:'100%',height:50,backgroundColor:'#cfc'}}></View>
        )
    }

    //头部
    _renderHead(){
        return(
            <View style={{width:'100%',height:50,backgroundColor:'#cfc'}}></View>
        )
    }

    //渲染每一条数据
    _renderItem(item,index){
        return(
            <View style={{width:'50%',height:100,justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize:18, color:'#ff4646'}}>{item.title}+{index}{this.state.extraData}</Text>
            </View>
        )
    }
}